#include("../../comm/ListHead.html")
<style>
    *[lay-href], *[lay-tips], *[index-event]{ cursor:pointer; }
    .box-carousel{ height:200px !important; }
    .box-carousel .layui-carousel-ind li{ background-color:#e2e2e2; }
    .box-carousel .layui-carousel-ind li:hover{ background-color:#c2c2c2; }
    .box-carousel .layui-carousel-ind li.layui-this{ background-color:#999; }
    .box-carousel .layui-carousel,
    .box-carousel > *[carousel-item] > *{ background-color:#fff; }
    .box-carousel .layui-col-space10{ margin:0; }
    .box-carousel .layui-carousel-ind{ position:absolute; top:-41px; text-align:right; }
    .box-carousel .layui-carousel-ind ul{ background:none; }
    .box{ padding:5px; }
    .box-big-font{ font-size:36px; color:#666; line-height:50px; padding:5px 0 10px; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:nowrap; }
    .box1 li{ text-align:center; }
    .box1 li .layui-icon{ display:inline-block; width:100%; height:60px; line-height:60px; text-align:center; border-radius:2px; font-size:30px; background-color:#F8F8F8; color:#333; transition:all .3s; -webkit-transition:all .3s; }
    .box1 li cite{ position:relative; top:2px; display:block; color:#666; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font-size:14px; }
    .box1 li:hover .layui-icon{ background-color:#f2f2f2; }
    .box2 .box2-body{ display:block; padding:10px 15px; background-color:#f8f8f8; color:#999; border-radius:2px; transition:all .3s; -webkit-transition:all .3s; }
    .box2-body h3{ padding-bottom:10px; font-size:12px; }
    .box2-body p cite{ font-style:normal; font-size:30px; font-weight:300; color:#009688; }
    .box2-body:hover{ background-color:#f2f2f2; color:#888; }
    .box3 .layui-progress{ margin:50px 0 60px; }
    .box3 .layui-progress:last-child{ margin-bottom:10px; }
    .box3 .layui-progress h3{ position:absolute; right:0; top:-35px; color:#999; font-size:14px; }
    .box3 .layui-progress-bar{ text-align:left; }
    .box3 .layui-progress-text{ top:-35px; line-height:26px; font-size:26px; }
    .box4{ }
    .right-badge{ position:absolute; top:50%; margin-top:-9px; right:15px; color:#01AAED; }
    .right_span{ font-size:14px; position:absolute; right:15px; }
    .layui-layer-tips{ background:#ff0000 }
</style>
<div class="layui-fluid layui-anim layui-anim-scale">
    <!--第一行-->
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md8">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6" id="box_1">
                </div>
                <div class="layui-col-md6" id="box_2">
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12" id="box_3">
                </div>
            </div>
        </div>
    </div>
    <!--第二行-->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3 " id="box_4">
        </div>
        <div class="layui-col-md3" id="box_5">
        </div>
        <div class="layui-col-md3" id="box_6">
        </div>
        <div class="layui-col-md3" id="box_7">
        </div>
    </div>
    <!--第三行-->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6 " id="list_1">
        </div>
        <div class="layui-col-md6" id="list_2">
        </div>
    </div>
</div>
#[[
<script id="tpl_box_1" type="text/html">
    <div class="layui-card box box1">
        <div class="layui-card-header">快捷方式</div>
        <div class="layui-card-body">
            <div class="layui-carousel box-carousel ">
                <div carousel-item style="margin-top:6px">
                    <ul class="layui-row layui-col-space10">
                        {{# for(var k=0;k<30;k++){ }}
                        <li class="layui-col-xs3">
                            <a lay-href="home/homepage1.html">
                                <i class="layui-icon layui-icon-console"></i>
                                <cite>主页一</cite>
                            </a>
                        </li>
                        {{# if(k%8==7){ }}
                    </ul>
                    <ul class="layui-row layui-col-space10">
                        {{# } }}
                        {{# } }}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</script>

<script id="tpl_box_2" type="text/html">
    <div class="layui-card box box2">
        <div class="layui-card-header">今日数据</div>
        <div class="layui-card-body">
            <div class="layui-carousel box-carousel  ">
                <div carousel-item style="margin-top:6px">
                    <ul class="layui-row layui-col-space10">
                        {{# for(var k=0;k<30;k++){ }}
                        <li class="layui-col-xs4">
                            <a lay-href="app/content/comment.html" class="box2-body">
                                <h3>待审评论</h3>

                                <p><cite>66</cite></p>
                            </a>
                        </li>
                        {{# if(k%6==5){ }}
                    </ul>
                    <ul class="layui-row layui-col-space10">
                        {{# } }}
                        {{# } }}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</script>


<script id="tpl_box_3" type="text/html">
    <div class="layui-card box box3" style="margin-left:10px">
        <div class="layui-card-header" lay-tips="yfaj">计划任务</div>
        <div class="layui-card-body ">
            <div class="layui-carousel box-carousel  ">
                <div carousel-item style="margin-top:6px">
                    <ul class="layui-row layui-col-space10">
                        {{# for(var k=0;k<12;k++){ }}
                        <li class="layui-col-xs11">
                            <div class="layui-progress" lay-showPercent="yes">
                                <h3>转化率（日同比 28% <span class="layui-edge layui-edge-top" lay-tips="增长" lay-offset="-15"></span>）</h3>

                                <div class="layui-progress-bar layui-bg-red" lay-percent="65%"></div>
                            </div>
                        </li>
                        {{# if(k%2==1){ }}
                    </ul>
                    <ul class="layui-row layui-col-space10">
                        {{# } }}
                        {{# } }}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</script>


<script id="tpl_box_4" type="text/html">
    <div class="layui-card box box4">
        <div class="layui-card-header">
            今日UV
            <span class="layui-badge layui-bg-blue right-badge" lay-tips="今日UV">99</span>
        </div>
        <div class="layui-card-body " style="height:100px">
            <p class="box-big-font">123,45</p>

            <p>
                总收入
                <span class="right_span color-6">2345.32 <i class="layui-inline layui-icon layui-icon-dollar"></i></span>
            </p>
        </div>
    </div>
</script>

<script id="tpl_box_5" type="text/html">
    <div class="layui-card box box5">
        <div class="layui-card-header">
            本月订单数
            <span class="layui-badge layui-bg-red right-badge" lay-tips="今日UV">月</span>
        </div>
        <div class="layui-card-body " style="height:100px">
            <p class="box-big-font">123,45</p>

            <p>
                已完成
                <span class="right_span color-6">58% <i class="layui-inline layui-icon layui-icon-dollar"></i></span>
            </p>
        </div>
    </div>
</script>


<script id="tpl_list_1" type="text/html">
    <div class="layui-card">
        <div class="card-search SearchTable">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title" style="width: 300px;float:left">
                    <li class="layui-this">收信箱<span class="layui-badge">99</span>
                    </li>
                    <li lay-event="Test">发件箱</li>
                    <li lay-event="Test">回收站<span class="layui-badge-dot layui-bg-orange"></span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-card-body"></div>
        <table class="layui-hide" id="table_1" lay-filter="table_1"></table>
    </div>
</script>


<script id="tpl_list_2" type="text/html">
    <div class="layui-card">
        <div class="card-search SearchTable">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title" style="width: 300px;float:left">
                    <li class="layui-this">收信箱<span class="layui-badge">99</span>
                    </li>
                    <li lay-event="Test">发件箱</li>
                    <li lay-event="Test">回收站<span class="layui-badge-dot layui-bg-orange"></span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-card-body"></div>
        <table class="layui-hide" id="table_2" lay-filter="table_1"></table>
    </div>
</script>

]]#
<script language="JavaScript">
    layui.use(['laytpl', 'carousel', 'index2', 'element', 'myTable'], function () {
        var laytpl = layui.laytpl, $ = layui.jquery;

        laytpl($("#tpl_box_1").html()).render({a: 'd222'}, function (html) {
            $("#box_1").html(html);
        });

        laytpl($("#tpl_box_2").html()).render({a: 'd222'}, function (html) {
            $("#box_2").html(html);
        });

        laytpl($("#tpl_box_3").html()).render({a: 'd222'}, function (html) {
            $("#box_3").html(html);
            layui.element.render();
        });
        laytpl($("#tpl_box_4").html()).render({}, function (html) {
            $("#box_4").html(html);
            $("#box_5").html(html);
            $("#box_6").html(html);
            $("#box_7").html(html);
            layui.element.render();
        });

        laytpl($("#tpl_box_5").html()).render({}, function (html) {
            $("#box_5").html(html);
            layui.element.render();
        });

        laytpl($("#tpl_list_1").html()).render({}, function (html) {
            $("#list_1").html(html);
            layui.element.render();
            tableindex = layui.myTable.render({
                url: '../testtable/TestTable2ListDataApi', skin: 'line', toolbar: false
                , title: '系统日志数据表', height: '236'
                , cols: [[
                    {field: 'test_id', title: '', width: 40, align: 'center', templet: '<div><i class="layui-icon" style="font-size: 24px; color: #1E9FFF;">&#xe67d;</i></div>'}
                    , {field: 'test_title', title: '标题', templet: '<div>{{ d.test_title }}<i class="layui-icon" style="font-size: 20px; color: red;">&#xe6c6;</i></div>'}
                    , {field: 'log_result_str', title: '', align: 'center', width: 70, templet: '<div><span class="layui-badge {{ d.log_result_color }}">{{ d.test_img_str }}</span></div>'}
                    , {field: 'pub_date_str', title: '时间', align: 'left', width: 160}
                ]]
                , page: false, limit: 5
            });
        });

        laytpl($("#tpl_list_2").html()).render({}, function (html) {
            $("#list_2").html(html);
            layui.element.render();
            tableindex = layui.myTable.render({
                elem: '#table_2',
                url: '../testtable/TestTable2ListDataApi', skin: 'line', toolbar: false
                , title: '系统日志数据表', height: '236'
                , cols: [[
                    {field: 'test_id', title: '', width: 40, align: 'center', templet: '<div><i class="layui-icon" style="font-size: 24px; color: #1E9FFF;">&#xe67d;</i></div>'}
                    , {field: 'test_title', title: '标题', templet: '<div>{{ d.test_title }}<i class="layui-icon" style="font-size: 20px; color: red;">&#xe6c6;</i></div>'}
                    , {field: 'log_result_str', title: '', align: 'center', width: 70, templet: '<div><span class="layui-badge {{ d.log_result_color }}">{{ d.test_img_str }}</span></div>'}
                    , {field: 'pub_date_str', title: '时间', align: 'left', width: 160}
                ]]
                , page: false, limit: 5
            });
        });

        //轮播切换
        $('.box-carousel').each(function () {
            var othis = $(this);
            layui.carousel.render({
                elem: this
                , width: '100%'
                , arrow: 'none'
                , interval: othis.data('interval')
                , autoplay: othis.data('autoplay') === true
                , trigger: 'hover'
                , anim: othis.data('anim')
            });
        });
    });

</script>
#include("../../comm/Foot.html")